import { Button, Input, InputNumber, Space } from 'antd';
import { YmForm } from 'ym-design';
const { FormItem, useForm } = YmForm;

function FormBasic() {
  const [form] = useForm();

  return (
    <div style={{ maxWidth: '600px' }}>
      <YmForm
        form={form}
        autoComplete="off"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        onFieldsChange={(changedfields, fieldDataList) => {
          console.log(
            '--Form--onFieldsChange--changedfields--fieldDataList--:',
            changedfields,
            fieldDataList,
          );
        }}
        onValuesChange={(changedValues, allValues) => {
          console.log(
            '--Form--onValuesChange--changedValues--allValues--:',
            changedValues,
            allValues,
          );
        }}
        onFinish={(values) => {
          console.log('--Form--onFinish--values:', values);
        }}
        onFinishFailed={(errorInfo) => {
          console.log('--Form--onFinishFailed--errorInfo--:', errorInfo);
        }}
      >
        <FormItem
          name="name"
          label="用户名"
          rules={[
            { required: true, whitespace: true, message: '请输入用户名' },
          ]}
        >
          {/* <YmInput type="text" placeholder="name" /> */}
          <Input type="text" placeholder="name" />
        </FormItem>

        <FormItem
          name="password"
          label="密码"
          rules={[{ required: true, whitespace: true, message: '请输入密码' }]}
        >
          <Input.Password placeholder="password" />
        </FormItem>
        <FormItem
          name="age"
          label="年龄"
          rules={[
            { required: true, message: '请输入年龄' },
            { type: 'number', min: 10, max: 60, message: '年龄范围10-60岁' },
          ]}
        >
          <InputNumber
            style={{ width: '120px' }}
            placeholder="请输入出年龄"
            min={10}
            max={60}
          />
        </FormItem>

        <FormItem wrapperCol={{ offset: 8 }}>
          <Space direction="horizontal">
            <Button htmlType="submit" type="primary">
              Submit
            </Button>
            <Button htmlType="reset">Reset</Button>
          </Space>
        </FormItem>
      </YmForm>
      <div>
        <p>
          <button
            onClick={() => {
              console.log('--getFieldValue--:', form.getFieldValue('name'));
            }}
          >
            getFieldValue
          </button>
        </p>
        <p>
          <button
            onClick={() => {
              console.log('--getFieldsValue()--:', form.getFieldsValue());
            }}
          >
            getFieldsValue()
          </button>
        </p>
        <p>
          <button
            onClick={() => {
              console.log(
                '--getFieldsValue(all)--:',
                form.getFieldsValue('all'),
              );
            }}
          >
            getFieldsValue(all)
          </button>
        </p>
        <p>
          <button
            onClick={() => {
              form.setFieldsValue({ name: '123', password: '456', age: 30 });
            }}
          >
            setFieldsValue
          </button>
        </p>
      </div>
    </div>
  );
}

export default FormBasic;
